<template>
	<div>
		<c_header :title="$route.query.title" :leftOptions="{backText: ''}" :rightOptions="{showMore: true}"></c_header>
		<div ref=article v-html="article" @click="show" v-if="!error"></div>
		<div class="error" v-else>网络连接失败，请刷新网页重试</div>
		<previewer v-if="previewerShow" :list="imglist" ref="previewer" :options="options"></previewer>
		<c_sidemenu></c_sidemenu>
	</div>
</template>

<script>
import c_header from '@/components/c_header'
import c_sidemenu from '@/components/c_sidemenu'
import { Previewer } from 'vux'
//需要新增右上角菜单
export default {
	name: 'article',
	data () {
		return {
			error: false,
			article: '',
			previewerShow: true,
			imglist: [],
			options: {
		        getThumbBoundsFn (index) {
		        	let thumbnail = document.querySelectorAll('.article-img')[index]
		       		let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
		        	let rect = thumbnail.getBoundingClientRect()
		        	return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
				}
		   },
		   menu: [
				{
					name: '天气',
					link: '/weather'
				},
				{
					name: '快讯',
					link: '/news'
				},
				{
					name: '智问',
					link: '/ask'
				},
				{
					name: '我的',
					link: '/setting'
				}
			]
		}
	},
	components: {
		c_header,
		c_sidemenu,
  		Previewer
	},
	methods: {
		getArticle (url) {
			this.$vux.loading.show({text: '狂命加载中...'})
			this.$http.get(url)
			.then((response) => {
				this.article = response.data.replace(/(<a class="img-wrap".*?)href=".*?"/g, '$1')
				.replace(/<img.+?src="(.+?)"/g, (img, src) => {
					this.imglist.push({src})
					return img + ' class="article-img"'
				})
				this.$vux.loading.hide()
				this.error = false
			}, () => {
				this.error = true
				this.$vux.loading.hide()
			})
		},
		show (event) {
			if(event.target.nodeName === "IMG"){
				for(let index = 0;index<this.imglist.length;index ++){
					if(event.target.src === this.imglist[index].src){
						this.$refs.previewer.show(index)
					}
				}
			}
		}
	},
	deactivated () {
		this.previewerShow = false
		this.error = false
	},
	activated () {
		document.title = this.$route.query.title
		this.previewerShow = true
		this.article = ''
		this.imglist = []
		this.getArticle(this.$base64.decode(this.$route.query.url))
	}
}
</script>

<style>
</style>